<template>
  <el-dialog :visible="showDialog" @close="close" title="题目预览" class="dialog">
    <div title="题目预览"></div>
    <el-row type="flex">
      <el-col>【题型】: <span v-if="DialogData.questionType === '1'">单选</span>
        <span v-else-if="DialogData.questionType === '2'">多选</span>
        <span v-if="DialogData.questionType === '3'">简答</span>
      </el-col>
      <el-col>【编号】:{{ DialogData.id }}</el-col>
      <el-col>【难度】:
        <span v-if="DialogData.difficulty === '1'">简单</span>
        <span v-else-if="DialogData.difficulty === '2'">一般</span>
        <span v-if="DialogData.difficulty === '3'">困难</span>
      </el-col>
      <el-col>【标签】:{{ DialogData.tags }}</el-col>
    </el-row>
    <el-row type="flex" style="margin: 20px 0">
      <el-col>【学科】:{{ DialogData.subjectID }}</el-col>
      <el-col>【目录】:{{ DialogData.catalog }}</el-col>
      <el-col>【方向】:{{ DialogData.direction }}</el-col>
      <el-col></el-col>
    </el-row>
    <hr />
    <el-row class="content">
      <el-col>【题干】:选项: (以下选中的选项为正确答案)</el-col>
    </el-row>
    <el-row>
      <el-col class="tigan">{{ DialogData.question }}</el-col>
    </el-row>
    <hr />
    <el-row>
      <el-col>
        <div class="answer">
          <div v-if="DialogData.videoURL">
            <div>
              【参考答案】：<el-button @click="showVadeo = true" type="danger" size="mini">视频答案解析</el-button>
              <el-button @click="showVadeo = false">关闭</el-button>
            </div>
            <div v-if="showVadeo">
              <video preload="none" controls autoplay>
                <source :src="DialogData.videoURL" type="video/mp4" />
              </video>
            </div>
          </div>
          <p class="video" v-else>此题暂无视频讲解</p>
        </div>
      </el-col>
    </el-row>

    <hr />
    <el-row class="analysis"><el-col>【答案解析】:{{ DialogData.answer }}</el-col>
    </el-row>
    <hr />
    <el-row><el-col>【题目备注】:{{ DialogData.remarks }}</el-col></el-row>
    <el-row type="flex" justify="end">
      <el-button type="primary" @click="close">关闭</el-button>
    </el-row>
  </el-dialog>
</template>

<script>
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    DialogData: {
      type: Object
    }
  },
  data() {
    return {
      showVadeo: false
    }
  },
  methods: {
    close() {
      this.$emit('update:showDialog', false)
      this.showVadeo = false
    }
  }

}
</script>

<style scoped lang='scss'>
.top {
  display: flex;
  justify-content: space-between;
}

.content,
.analysis,
.remark,
.answer {
  padding: 20px 0;
}

.content {
  padding-top: 5px;
}

.video {
  margin-left: 20px;
}

.tigan {
  margin: 1px 0 20px 10px;
}
</style>
